/*
 * @Description:
 * @Author: r_yuesheng
 * @Date: 2022-04-11 10:56:33
 * @LastEditTime: 2022-04-16 08:41:08
 * @LastEditors: r_yuesheng
 */
import { Button, Input } from 'antd';
import React, { useState } from 'react';
import { SketchPicker } from 'react-color';
// import '@/assets/css/index.less';
const { Search } = Input;
class index extends React.Component {
  state = {
    color: '',
  };
  renderTest = item => {
    return (
      <div key={item} className="r_item">
        item
      </div>
    );
  };
  getTheme = color => {
    console.log('触发了换肤', color);
    this.setState({
      color,
    });
    window.less
      .modifyVars({
        '@primary-color': color,
        '@layout-header-padding': '0px',
        '@border-color-base': color,
        '@text-color': color,
        '@link-color': color,
      })
      .then(() => {
        console.log(color);
      })
      .catch(error => {
        console.log(error);
      });
  };
  onSearch = value => {
    this.getTheme(value.hex);
  };
  render() {
    const test = [];
    for (let i = 0; i < 15; i++) {
      test.push(i);
    }
    return (
      <div>
        <Button type="primary">主题色</Button>
        <Search placeholder="输入颜色" onSearch={this.onSearch} style={{ width: 200 }} />
        <SketchPicker color={this.state.color} onChangeComplete={this.onSearch}></SketchPicker>
        {/* <Button onClick={this.getTheme.bind(this, '#e76109')}>换色</Button> */}
        <div className="r_flex_wrap">
          {test.map(item => {
            return this.renderTest(item);
          })}
        </div>
      </div>
    );
  }
}

export default index;
